<template>
    <div>

        <h1>账户管理</h1>
        <div style="float: right; margin-bottom: 20px;">
            <el-button type="primary" size="medium" @click="showDialog('新增')">+ 新增</el-button>
            <el-button type="danger" @click="showDialog('删除')">删除</el-button>
            <el-button @click="handleEdit">修改</el-button>
        </div>
        <el-dialog ref="formDialog" title="编辑账户" :visible.sync="dialogVisible1" width="30%">
            <el-form ref="form" :model="formData" label-width="80px">
                <el-form-item label="转账记录id">
                    <el-input v-model="formData.id"></el-input>
                </el-form-item>
                <el-form-item label="交易金额">
                    <el-input v-model="formData.money"></el-input>
                </el-form-item>
                <el-form-item label="账户Id">
                    <el-input v-model="formData.accountId"></el-input>
                </el-form-item>
                <el-form-item label="被转帐Id">
                    <el-input v-model="formData.toAccountId"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog ref="formDialog" title="删除账户" :visible.sync="dialogVisible2" width="30%">
            <el-form ref="form" :model="formData" label-width="80px">
                <el-form-item label="账户id">
                    <el-input v-model="formData.id"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleDelete">删除</el-button>
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <br>
        <template>
            <el-table :data="tableData" border show-summary style="width: 100%;">
                <el-table-column prop="id" label="ID" width="180">
                </el-table-column>
                <el-table-column prop="money" label="交易金额">
                </el-table-column>
                <el-table-column prop="accountId" label="账户id">
                </el-table-column>
                <el-table-column prop="toAccountId" sortable label="被转账id">
                </el-table-column>

            </el-table>
        </template>
        <br>
        <div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- ... 其他内容 ... -->


    </div>
</template>

<script>
import axiosInstance from '@/router/axiosInstance';
export default {
    name: 'UserView',
    mounted() {
        this.fetchData(); // 在组件挂载后立即调用 fetchData  
    },
    methods: {
        async fetchData() {
            try {
                const response = await axiosInstance.get('http://localhost:8080/tradeRecords/ZhuanMoney/page', {
                    params: {
                        page: this.currentPage,
                        size: this.pageSize
                    }
                });
                this.tableData = response.data.records; // 更新用户数据列表  
                this.total = response.data.total; // 更新总记录数  
            } catch (error) {
                console.error('Error fetching data:', error);
                // 可以添加错误处理逻辑，比如显示错误消息  
            }
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleDelete() {
            const id = this.formData.id; // 获取用户ID  

            if (!id) {
                alert('请选择一个用户进行删除！');
                return;
            }

            axiosInstance.delete(`http://localhost:8080/tradeRecords/ZhuanMoney/${id}`) // 替换为你的API URL，包括用户ID  
                .then(response => {
                    console.log('删除成功:', response.data);
                    this.dialogVisible2 = false; // 关闭删除对话框  
                    this.fetchData(); // 重新获取数据，以更新UI  
                })
                .catch(error => {
                    console.error('删除失败:', error);
                    alert('删除用户失败，请重试！');
                });
        },
        // 修改的方法  
        handleEdit() {
            // 实现修改的逻辑，同样需要先选择一行  
            console.log('修改按钮被点击');
        },
        showDialog(action) {
            // 根据action初始化formData，例如：  
            if (action === '新增') {
                this.dialogVisible1 = true;
                this.formData = { id: '', money: '', accountId: '', toAccountId: '' }; // 重置表单数据  
            } if (action === '删除') {
                this.dialogVisible2 = true;
                this.formData = { id: '', money: '', accountId: '', toAccountId: '' }; 
            }

            // 如果是编辑，则根据当前选中的数据设置formData  
        },
        submitForm() {
            //if (!this.formData.id === '') { // 假设id为空时认为是新增操作  
            axiosInstance.post('http://localhost:8080/tradeRecords/ZhuanMoney', this.formData)
                .then(response => {
                    console.log('新增成功:', response.data);
                    this.dialogVisible1 = false; // 关闭对话框  
                    this.fetchData(); // 重新获取数据，以显示新增的用户  
                })
                .catch(error => {
                    console.error('新增失败:', error);
                });
        },
        // 处理每页显示条数变化  
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData(); // 重新获取数据  
        },
        // 处理当前页码变化  
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchData(); // 重新获取数据  
        },
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0, // 总记录数，需要从后端获取  
            tableData: [],
            dialogVisible1: false,
            dialogVisible2: false,
            formData: {
                id: '',
                password: '',
                userId: '',
                balance: ''
            },
        };
    },
}
</script>

<style scoped>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.el-table .el-table__header-wrapper th {
    /* 设置头部单元格的高度 */
    height: 60px;
    /* 调整为你希望的高度 */
    /* 可能还需要调整其他样式，如行内填充（padding）等 */
    padding: 0 20px;
    /* 示例：调整内填充 */
    line-height: 60px;
    /* 使文本垂直居中 */
}
h1 {
    font-family: '宋体','Arial', sans-serif; /* 字体 */ 
    font-size: 28px; /* 字体大小 */
    color: rgb(94, 208, 253); /* 字体颜色 */
}
</style>